<template>
    <div class="jx-content">
        <button @click="dialogVisible = true" class="button-style muchControl">批量控制</button>
        <div>
            <h3 class="title">教学资源</h3>
            <div class="fileBox">
                <ul>
                    <li>
                        <img src="./../../../assets/images/re-ppt.png" alt="">
                        <p class="typeName">学习课件</p>
                        <p class="fileName">xxxxxx.ppt</p>
                        <p class="fileBtnBox"><i class="iconfont icon-yanjing"></i><i class="iconfont icon-xiazai"></i></p>
                    </li>
                    <li>
                        <img src="./../../../assets/images/re-video.png" alt="">
                        <p class="typeName">学习课件</p>
                        <p class="fileName">xxxxxx.ppt</p>
                        <p class="fileBtnBox"><i class="iconfont icon-yanjing-xiexian"></i><i class="iconfont icon-xiazai"></i></p>
                    </li>
                     <li>
                        <img src="./../../../assets/images/re-excel.png" alt="">
                        <p class="typeName">学习课件</p>
                        <p class="fileName">xxxxxx.ppt</p>
                        <p class="fileBtnBox"><i class="iconfont icon-yanjing-xiexian"></i><i class="iconfont icon-xiazai"></i></p>
                    </li>
                     <li>
                        <img src="./../../../assets/images/re-word.png" alt="">
                        <p class="typeName">学习课件</p>
                        <p class="fileName">xxxxxx.ppt</p>
                        <p class="fileBtnBox"><i class="iconfont icon-yanjing-xiexian"></i><i class="iconfont icon-xiazai"></i></p>
                    </li>
                     <li>
                        <img src="./../../../assets/images/re-video.png" alt="">
                        <p class="typeName">学习课件</p>
                        <p class="fileName">xxxxxx.ppt</p>
                        <p class="fileBtnBox"><i class="iconfont icon-yanjing-xiexian"></i><i class="iconfont icon-xiazai"></i></p>
                    </li>
                     <li>
                        <img src="./../../../assets/images/re-video.png" alt="">
                        <p class="typeName">学习课件</p>
                        <p class="fileName">xxxxxx.ppt</p>
                        <p class="fileBtnBox"><i class="iconfont icon-yanjing-xiexian"></i><i class="iconfont icon-xiazai"></i></p>
                    </li>
                     <li>
                        <img src="./../../../assets/images/re-video.png" alt="">
                        <p class="typeName">学习课件</p>
                        <p class="fileName">xxxxxx.ppt</p>
                        <p class="fileBtnBox"><i class="iconfont icon-yanjing-xiexian"></i><i class="iconfont icon-xiazai"></i></p>
                    </li>
                </ul>
                <i class="clear-fix"></i>
            </div>
        </div>
        <div>
            <h3 class="title">其他资源</h3>
            <div class="fileBox">
                <ul>
                    <li>
                        <img src="./../../../assets/images/re-zip1.png" alt="">
                        <p class="typeName">PPT辅助资源</p>
                        <p class="fileName">xxxxxx.ppt</p>
                        <p class="fileBtnBox"><i class="iconfont icon-yanjing"></i><i class="iconfont icon-xiazai"></i></p>
                    </li>
                    <li>
                        <img src="./../../../assets/images/re-zip2.png" alt="">
                        <p class="typeName">PPT辅助资源</p>
                        <p class="fileName">xxxxxx.ppt</p>
                        <p class="fileBtnBox"><i class="iconfont icon-yanjing-xiexian"></i><i class="iconfont icon-xiazai"></i></p>
                    </li>

                </ul>
                <i class="clear-fix"></i>
            </div>
        </div>
        <div>
            <h3 class="title">预置资源</h3>
            <div class="fileBox">
                <ul>
                    <li>
                        <img src="./../../../assets/images/re-zip3.png" alt="">
                        <p class="typeName">本课程资源包</p>
                        <p class="fileName">xxxxxx.ppt</p>
                        <p class="fileBtnBox"><i class="iconfont icon-xiazai"></i></p>
                    </li>

                </ul>
                <i class="clear-fix"></i>
            </div>
        </div>
        <el-dialog
        title="批量控制"
        :visible.sync="dialogVisible"
        width="490px"
        id="ymuchControl"
        >
        <div class="headBox"><span><i class="iconfont icon-wenti-m"></i>&emsp;该功能批量控制学生端教学资源的显示/隐藏</span></div>
        <div class="contentBox">
            <ul>
                <li>
                    <i>学习课件</i>
                    <el-switch
                        class="switches"
                        v-model="value1"
                        :width="34"
                        active-color="#13ce66"
                        inactive-color="#b5c2ca">
                    </el-switch>
                </li>
                 <li>
                    <i>实验课视频</i>
                    <el-switch
                        class="switches"
                        v-model="value2"
                        :width="34"
                        active-color="#13ce66"
                        inactive-color="#b5c2ca">
                    </el-switch>
                </li>
                 <li>
                    <i>实验手册</i>
                    <el-switch
                        v-model="value3"
                        class="switches"
                        :width="34"
                        active-color="#13ce66"
                        inactive-color="#b5c2ca">
                    </el-switch>
                </li>
                 <li>
                    <i>理论课视频</i>
                    <el-switch
                        v-model="value4"
                        class="switches"
                        :width="34"
                        active-color="#13ce66"
                        inactive-color="#b5c2ca">
                    </el-switch>
                </li>
                 <li>
                    <i>随堂练习</i>
                    <el-switch
                        v-model="value5"
                        class="switches"
                        :width="34"
                        active-color="#13ce66"
                        inactive-color="#b5c2ca">
                    </el-switch>
                </li>
                 <li>
                    <i>备课材料</i>
                    <el-switch
                        v-model="value6"
                        active-color="#13ce66"
                        class="switches"
                        :width="34"
                        inactive-color="#b5c2ca">
                    </el-switch>
                </li>
                 <li>
                    <i>其他资源</i>
                    <el-switch
                        v-model="value7"
                        active-color="#13ce66"
                        class="switches"
                        :width="34"
                        inactive-color="#b5c2ca">
                    </el-switch>
                </li>
                 <li>
                    <i>课程材料</i>
                    <el-switch
                        v-model="value8"
                        active-color="#13ce66"
                        class="switches"
                        :width="34"
                        inactive-color="#b5c2ca">
                    </el-switch>
                </li>
            </ul>
            <div class="clear-fix"></div>
        </div>
        <span slot="footer" class="dialog-footer">
           <button class="button-style">确定</button>
        </span>
        </el-dialog>
    </div>
</template>
<style>
    #ymuchControl .el-dialog__body{
        padding: 28px 68px;
        font-size: 16px;
    }
    #ymuchControl .el-dialog__body .iconfont{
        color: #207fec;
    }
    #ymuchControl .headBox{
        color: #000000;
        margin-bottom: 38px;
    }
    #ymuchControl .contentBox ul{
        padding: 0 40px;
    }
    #ymuchControl .contentBox li{
        float: left;
        width: 120px;
        height: 15px;
        margin-bottom: 22px;
        font-size: 14px;
    }
     #ymuchControl .contentBox li:nth-of-type(odd){
        margin-right: 34px;
    }
     #ymuchControl .contentBox li .switches{
         float: right;
     }
     #ymuchControl .button-style{
         width: 90px;
         padding: 0;
         height: 32px;
     }
     #ymuchControl .dialog-footer{
         display: block;
         text-align: center;
     }
</style>
<style scoped lang="scss">
 @import "./../../../styles/ypublic.scss";
 .jx-content{
     position: relative;
 }
 .muchControl{
     position: absolute;
     right: 40px;
     top: 30px;
     height: 32px;
     padding: 0;
     width: 90px;
 }
 .title{
     font-size: $fs16;
     color: $title-gray;
     margin-bottom: 35px;
     font-weight: normal;
 }
 .fileBox{

     margin-left: 10px;
     border-bottom: 1px solid #e8e8e8;
 }
 .fileBox>ul>li{
     float: left;
     margin-right: 30px;
     height: 166px;
     width: 166px;
     text-align: center;
     margin-bottom: 14px;
     position: relative;
      &:hover{
        background: #f9f8f8;
        .fileBtnBox{
            display: block;
        }
      }
 }
  .fileBox>ul>li>img{
      margin-top: 28px;
  }
  .fileBox>ul>li .typeName{
      margin-top: 20px;
      font-size: $fs16;
      color: #727272;
  }
  .jx-content .fileBox>ul>li .fileName{
      margin-top: 6px;
      font-size: $fs14;
      color: #727272;
      position: relative;
  }
  .fileBox>ul>li .fileBtnBox{
      position: absolute;
      bottom: 12px;
      left: 0;
      width: 100%;
      line-height: 12px;
      text-align: right;
      display: none;
  }
   .fileBox>ul>li .fileBtnBox>i:nth-of-type(1){
       margin-right: 11px;
       cursor: pointer;
   }
   .fileBox>ul>li .fileBtnBox>i:nth-of-type(2){
       margin-right: 14px;
       cursor: pointer;
   }
</style>
<script>
    import $ from "jquery";
    export default{
        data(){
            return{
                dialogVisible:false,
                value1:true,
                value2:true,
                value3:true,
                value4:true,
                value5:true,
                value6:true,
                value7:true,
                value8:true,
            }
        }
    }
</script>
